<template>
  <div class="toolbar">
      <component :is="currentPanelComponent"></component>
  </div>
</template>

<script lang="ts" setup>
import { computed, watch, PropType } from 'vue'

import SystemFunction from './SystemFunction.vue'
import EquipmentList from './EquipmentList.vue'

const props = defineProps({
  toolActive: {
    type: String as PropType<string>,
    defalult: '',
  }
})

const currentPanelComponent = computed(() => {
  let name = props.toolActive === 'equipment' ? EquipmentList : SystemFunction;
  return name
})
</script>

<style lang="scss" scoped>
.toolbar {
  border-radius: 8px;
  background-color: #fff;
}

.content {
  height: 100%;
  padding: 12px;
  font-size: 13px;

  @include overflow-overlay();
}
</style>
